<template>
  <div class="page-container">
    <div>
      <ex_header_spiler title="ex_select_auto演示页面" />
      <h3 class="bold">介绍</h3>
      用于快速生成下拉选择框，应用于固定列表，后台枚举，网络请求
      可应用所有el-select组件属性，不适用插槽
      <div class="flex_row_center">
        继承el-select所有事件与属性
        <el-link class="mg_l2" href="https://element.eleme.cn/#/zh-CN/component/select" type="primary"
          target="_blank">相关链接</el-link>
      </div>
      <h3 class="bold">使用示例</h3>
      <div>
        <div>固定选择最简用法,使用items属性</div>
        <ex_select_auto v-model="form.a" :items="[{ label: 'A', value: 'A' }]" />
      </div>
      <div>
        <div>后台枚举最简用法,使用enum属性</div>
        <ex_select_auto v-model="form.b" enum="OmsOutboundOrderStatusEnum" />
      </div>
      <div>
        <div>listHandler属性可对获取的列表进行修改，Function</div>
        <ex_select_auto v-model="form.c" :items="[{ label: 'A', value: 'A' }]"
          :listHandler="e => e.map(it => { it.label = it.label + '1'; return it; })" />
      </div>
      <div>
        <div>后台获取url列表,option属性定义显示属性,可定义对象或方法，返回{label:"",value:""}格式</div>
        <ex_select_auto v-model="form.d" url="/ums-api/ums/UmsExcelRpc/selectListPage.json"
          :option="{ label: 'businessType', value: 'businessType' }" />
        <p>关联的属性有urlType控制请求方式，可以用'json'，urlParams控制请求参数，传入对象或方法，为请求参数，</p>
        <p> urlControl为url控制属性，传入对象{netStop:boolean控制是否请求，focusInnerData：array,不请求时强制覆盖内部列表，warnning：不请求时的警告文字}</p>
        <p> dependentId依赖字符串，传入字符串，当值变化时会重新发起请求</p>
        <p> i18n国际化字段，当定义固定items时，是否对label字段进行国际化处理</p>
        <p> storeData缓存字段，对url请求进行缓存</p>
      </div>
      <h3 class="bold">新增属性</h3>

      <el-table :data="ex_select_auto_attrs" style="width: 100%">
        <el-table-column prop="name" label="参数" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="200">
        </el-table-column>
        <el-table-column prop="enum" label="可选值" width="180">
        </el-table-column>
        <el-table-column prop="default" label="默认值" width="180">
        </el-table-column>
      </el-table>
      <h3 class="bold">新增事件</h3>

      <el-table :data="ex_select_auto_event" style="width: 100%">
        <el-table-column prop="name" label="事件名" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="说明" min-width="200">
        </el-table-column>
        <el-table-column prop="params" label="类型" width="200">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>



export default {
  title: "ex_select_auto组件",
  data() {
    return {
      form: {},
      ex_select_auto_attrs: [
        { name: "items", remark: "当显示固定列表时，传入{label,value}数组结构生成选择列表，", type: "array" },
        { name: "enum", remark: "当显示后台枚举列表时使用，填入后台枚举类名", type: "string" },
        { name: "url", remark: "当显示网络请求获取列表时使用，填入请求地址", type: "string" },
        { name: "urlType", remark: "网络请求类型", type: "string", default: "form" },
        { name: "urlParams", remark: "网络请求参数处理,返回请求参数", type: "Object, Function()", default: "form" },
        { name: "dependentId", remark: "依赖值，当传入依赖值变动时会自动触发数据刷新", type: "string" },
        { name: "urlControl", remark: "网络请求控制，返回控制对象，结构为{netStop,warnning,focusInnerData},netStop表示停止请求刷新，warnning表示提示文字，focusInnerData表示强制刷新数据列表", type: "Object, Function(params)" },
        { name: "option", remark: "返回{label,value}，label为显示文字，value为代表值，当为function时输入单个item对象返回{label,value}", type: "Object, Function(item)" },
        { name: "i18n", remark: "是否对内部列表的label进行国际化转换，", type: "Boolean", default: "false" },
        { name: "listHandler", remark: "对显示列表进行处理转化参数，输入列表返回处理后列表", type: "function(list)" },
        { name: "remoteQuery", remark: "搜索请求参数，当filterable为true且remoteQuery有值时会自动生成搜索请求方法。当为string类型时表示搜索参数名，当为function类型时输入搜索值返回请求参数。", type: "Function(query)/String", enum: "", default: "null" },
        { name: "currentLabel", remark: "显示文字内容，会覆盖原有显示值", type: "string" },
      ],
      ex_select_auto_event: [
        { name: "changeItem", remark: "与change事件同时触发，传出内部选择的对象", params: "item" },
        { name: "initList", remark: "当列表初始化或变化时触发", params: "list" },


      ],
    };
  },

};
</script>
<style  scoped></style>
